<template>
	<view v-if="istrue">
		<view class="flex_column p20" v-if="lines.length!=0">
			<view v-for="(item,index) in lines" :key="index" class="mt20 p20 flex_start divbox"
				style="border-radius:12upx;height: 260upx;" @click="golines(item)">
				<image class="mr30" :src="item.CoverImg" style="width:200upx;height: 200upx;border-radius:8upx;"
					mode="aspecFtFill">
				</image>
				<view class="flex_column pos" style="width:470upx;">
					<view class="bold f30 txt1">{{item.RouteName}}</view>
					<view class="flex_start flex_items f26 mt20 txt2" style="color: #ccc;">
						<text class="mr20">{{item.GuideRouteInfoList.length}}个景点</text>
						<text class="mr20">|</text>
						<text class="mr20">{{item.Distance}}Km</text>
						<text class="mr20">|</text>
						<text>{{item.TimeConsuming}}小时</text>
					</view>
					<!-- <view class="f26 mt20 txt2" style="color: #ccc;">{{item.Tags}}</view> -->
					<view class="flex_start flex_items abs" style="bottom: 20upx;">
						<view v-for="(item2,index2) in item.Tags" :key="index2" class="f24 p10 mr20" style="color: #E2A55A;border: 1px solid #E2A55A;
						border-radius: 12rpx;">{{item2}}</view>
						<!-- <view class="f24 p10 mr20" style="color: #E2A55A;border: 1px solid #E2A55A;
border-radius: 12rpx;">官方推荐</view>
						<view class="f24 p10 mr20" style="color: #39B333;border: 1px solid #39B333;
border-radius: 12rpx;">旅游好地方</view>
						<view class="f24 p10 mr20" style="color: #3C97E4;border: 1px solid #3C97E4;
border-radius: 12rpx;">避暑一下</view> -->
					</view>
				</view>
			</view>
		</view>
		<view v-else class="flex_items flex_center nodata">
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {
		GetTourroutes
	} from '@/api/api.js';
	export default {
		data() {
			return {
				istrue: false,
				lines: [],
				info: {
					Index: 1,
					Size: 10,
				}
			}
		},
		onLoad() {
			this.info.SiteId = this.$category.api.Tourroute
			this.getData()
		},
		methods: {
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				GetTourroutes(this.info).then(res => {
					if (res.Data.length == 0) {
						uni.showToast({
							title: '暂无更多数据',
							icon: 'none'
						})
					} else {
						for (var i = 0; i < res.Data.length; i++) {
							if (res.Data[i].Tags != null) {
								res.Data[i].Tags = res.Data[i].Tags.split(',')
							}
						}
						this.lines = res.Data
					}
					uni.hideLoading()
					this.istrue = true
				})
			},
			golines(item) {
				uni.navigateTo({
					url: './tourdetail?types=lines&&item=' + JSON.stringify(item)
				})
			}
		},
		onShow() {
			uni.removeStorageSync('nowtime')
		},
		onReachBottom() {
			console.log('滑动到距离底部100px的时候触发,可以放 。。业务逻辑');
			this.info.Index += 1
			this.getData()
		},
		onPullDownRefresh() {
			this.lines = []
			this.info.Index = 1
			this.getData()
		},
	}
</script>

<style lang="scss">
	.txt1 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 1;
		color: #1A1A1A;
	}

	.txt2 {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		overflow: hidden;
		-webkit-line-clamp: 2;
		color: #CCCCCC;
	}
</style>
